<template>
  <div class="layout-page bg-#f8f9fe">
    <div class="top h-207px">
      <div class="w-1328px mx-auto box-border pt-53px flex">
        <div class="flex-1 flex flex-col">
          <div class="flex items-center mb-12px">
            <h3 class="font-size-24px fw-700 lh-35px">
              {{ companyDetail.companyName }}
            </h3>
            <span class="font-size-18px ml-12px"
            >({{ companyDetail.companyAddress }})</span
            >
          </div>

          <div class="mt-20px flex lh-20px">
            <div class="flex flex-col">
              <span class="text-light mb-5px">联系人:</span>
              <span class="text-sub">{{ companyDetail.companyContact }}</span>
            </div>
            <div class="flex flex-col ml-140px">
              <span class="text-light mb-5px">联系电话:</span>
              <span class="text-sub">{{
                  companyDetail.companyContactMobile
                }}</span>
            </div>
            <div class="flex flex-col ml-140px">
              <span class="text-light mb-5px">已有节点数:</span>
              <span class="text-sub">{{
                  companyDetail.nodeInfoTotal || 0
                }}</span>
            </div>
            <div class="flex flex-col ml-140px">
              <span class="text-light mb-5px">发布资源数:</span>
              <span class="text-sub">{{
                  companyDetail.resourceSupplyTotal || 0
                }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bg-#fff">
      <div class="w-1328px mx-auto">
        <el-tabs v-model="active" class="user-center-tabs">
          <el-tab-pane label="统计" name="statistics"></el-tab-pane>
          <el-tab-pane label="供应信息" name="supply"></el-tab-pane>
          <!--          <el-tab-pane label="硬件发布" name="hardware" lazy></el-tab-pane>-->
          <el-tab-pane label="节点信息" name="node" lazy></el-tab-pane>
          <el-tab-pane label="公司人员" name="user" lazy></el-tab-pane>
          <el-tab-pane label="资源申请" name="apply" lazy></el-tab-pane>
          <el-tab-pane label="工单处理" name="order" lazy></el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="w-1328px mx-auto py-25px">
      <keep-alive>
        <Statistics v-if="active === 'statistics'" />
      </keep-alive>
      <keep-alive>
        <Supply v-if="active === 'supply'" />
      </keep-alive>
      <keep-alive>
        <hardware v-if="active === 'hardware'" :company-id="companyDetail.companyId" />
      </keep-alive>
      <keep-alive>
        <Node v-if="active === 'node'" />
      </keep-alive>
      <keep-alive>
        <User v-if="active === 'user'" />
      </keep-alive>
      <keep-alive>
        <Application isCompany v-if="active === 'apply'" />
      </keep-alive>
      <keep-alive>
        <Order isCompany v-if="active === 'order'" />
      </keep-alive>
    </div>
  </div>
</template>

<script setup>
import { useUserStore } from "@/store";
import { Supply } from "@/views/user/components";
import Application from "./components/Application.vue";
import Node from "./components/node.vue";
import User from "./components/userList.vue";
import Order from "./components/Order.vue";
import Statistics from "./components/Statistics.vue";
import hardware from "./components/hardware.vue";

const userStore = useUserStore();
const userInfo = computed(() => userStore?.userInfo || {});
const $api = inject("$api");

const route = useRoute();
const active = ref(route.query.active || "statistics");

const companyDetail = ref({});
const getCompanyDetail = async () => {
  if (userInfo.value && userInfo.value.companyId) {
    try {
      const { data } = await $api.company.getDetail(userInfo.value.companyId);
      companyDetail.value = data;
    } catch (error) {
      console.error('获取公司详情失败', error);
    }
  } else {
    console.warn('公司ID为空，无法获取公司详情');
  }
};

onMounted(() => {
  getCompanyDetail();
});
</script>

<style scoped lang="less">
.top {
  background: url("/user-center-bg.png") no-repeat center;
}
</style>
